import { Badge,Card,NoticeBar, Button,Scroller,Popup,Group, Field, Toast,NumberPicker, Context,SelectField, Dialog  } from 'saltui';
import './PageHome.less';
import './popup.less';
import './group.less';

import Icon from 'salt-icon';
import ToastSuccess from 'salt-icon/lib/ToastSuccess';
import ToastError from 'salt-icon/lib/ToastError';
import ToastFail from 'salt-icon/lib/ToastFail';
import ToastLoading from 'salt-icon/lib/ToastLoading';

import PlusCircle from 'salt-icon/lib/PlusCircle';
import Lang from './Lang';
import  HTab  from '../../../../Common/Tab';
import  EditPrice  from '../../../common/room/EditPrice';
import  EditStatus  from '../../../common/room/EditStatus';
import  DelRoom  from '../../../common/room/DelRoom';
import  RoomList  from '../../../common/room/RoomList';
import  Ajax  from '../../../../Common/Ajax';
import MockTool from "../../../mock/MockTool";


export default class RoomManage extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      keyword: 1,
      visible: false,
      value: null,
      room: [
        {id: 1, name: '0101', status: 0, type: 1, typeName: 'single', number: 22, unit: '$'},
        {id: 2, name: '0101', status: 0, type: 2, typeName: 'double', number: 11, unit: '$'}
      ],
      editPrice: [],
      type: [
        {value: 1, text: 'single'}, {value: 2, text: 'doublue'},
      ],
      selectText: [

      ],
      selectRoomId: [

      ],
      counts: []
    };
    this.roomType = []
    this.option = [];
    this.typeid = 0;


  }

  handleConfirm =() => {
    let that = this;
    return {
      title: '删除客房',
      locale: 'en_US',
      content: '是否删除选中的客房',
      onConfirm() {
        Ajax.post("room/del",{'room_id':that.state.selectRoomId},that._initListDel);
      },
      onCancel() {
        console.log('confirm cancel');
      },
    };
  }

  handleSelectRoom = (id,event) =>{
    let room = this.state.room;
    let selectText = this.state.selectText;
    let selectRoomId = this.state.selectRoomId;
    room[id]['selected']  ?room[id]['selected'] =0 : room[id]['selected'] =1;
    selectText = [];
    selectRoomId= [];
    room.map(function(room,index){
      if(room.selected){
        selectText.push(room.room_name);
        selectRoomId.push(room.id);
      }

    })
    this.setState({room: room});
    this.setState({selectText: selectText});
    this.setState({selectRoomId: selectRoomId});
  }

  _initTypeList = (data) =>{
    this.roomType = data;
  }

  localSuccess = (data) =>{
    this.option = data;
  }

  componentWillMount () {
    Ajax.post("roomtype/liststab",{},this._initTypeList);
    Ajax.post("local/lists",{opetion_type:['roomtype','roomstatus']},this.localSuccess);
    this.handSwitchType(0);
  }

  handSwitchType = (id,event) => {
    this.typeid = id;
    this._initList(id);
  }

  _initList =(id) =>{
    let typeId = MockTool.getType(this.roomType,id,'id');
    Ajax.post("room/lists",{'room_type_id':typeId},this.sussce);
  }

  _initListDel =(data) =>{
    Ajax.post("room/lists",{'room_type_id':0},this.sussce);
  }

  sussce = (data) =>{

    this.setState({
      room:data.lists
    })

    this.setState({
      counts: data.lists_count
    })

  }

  render() {

    return (
    <div className="card-wrap">
      <Card className="card-example t-MT10">
        <div className="t-MB10 t-ML10   lineByRem"><h1 className="t-PT10">{Lang.roomManage}</h1></div>
        <hr/>
        <div className="demo-line">
          {
            this.state.counts.map((counts, index) =>
              <Badge count={counts.value}>
                <a href="#1" className={"demo-item " + counts.style}>{counts.name}</a>
              </Badge>
            )
          }
        </div>
        <div className="demo-line">

          {/*<EditPrice room={this.state.room}  buttonName={Lang.editSattus} />*/}
          {/*<EditStatus room={this.state.room} options={this.state.type}  buttonName={Lang.editSattus} />*/}
          <DelRoom  buttonName={Lang.del}  confirm={this.handleConfirm} />

        </div>

        <div className="notice-div">
          <NoticeBar className="noticeMessage" message={Lang.selectRoom+':'+this.state.selectText.join(',')} closable={false} type="warning" />
        </div>

        <HTab roomType={this.roomType} onTabClick={this.handSwitchType}  active={'0'} />

        <Scroller className="t-FB1" scrollX scrollY={false}>
          <div className="t-LH44 room-list">
            <RoomList  typeid={this.typeid} onChange={this.handSwitchType} option={this.option} roomtype={1}  onClick={this.handleSelectRoom}  room={this.state.room}  />
          </div>
        </Scroller>


      </Card>
    </div>
  );
  }
}
